<template>
    <div id="app">
        <router-view></router-view>
    </div>
    
</template>

<script>
export default {
    name: 'app'
}
</script>

<style lang="less">
html,body{
    height:100%;
}
 .background-4 {
background: rgb(105,155,200);
background: -moz-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%, rgba(181,197,216,1) 57%);
 background: -webkit-gradient(radial, top left, 0px, top left, 100%, color-stop(0%,rgba(105,155,200,1)), color-stop(57%,rgba(181,197,216,1)));
 background: -webkit-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
 background: -o-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
 background: -ms-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
 background: radial-gradient(ellipse at top left, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#699bc8', endColorstr='#b5c5d8',GradientType=1 );
}
body {
    .background-4;
}

#app {}

.box {
    display: flex;
}

.box-cell-1 {
    flex: 1;
}

.cell-end {
    justify-content: flex-end;
}

.cell-v-center {
    align-items: center;
}

.steps {
    margin: 1em;
    margin-bottom: 2em;
    width: 80%;
}

.info {
    color: #2d8cf0;
}

.success {
    color: #19be6b;
}

.warning {
    color: #ff9900;
}

.danger {
    color: #ed3f14;
}

.list-group {
    font-size: 1.2em;
}

.list-group-item {
    padding: 0.8em 0.6em;
    border-radius: 0.3em;
    border: 1px solid;
    border-color: #ddd;
    margin: 0.2em 0;
    .badge {
        float: right;
        display: inline-block;
        min-width: 10px;
        padding: 3px 7px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        background-color: #777;
        border-radius: 10px;
    }
}

.my-item {
    opacity: 0;
    animation-name: animationStyle1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    cursor: pointer;
}

.shown-loop(@n, @i: 1) when (@i <=@n) {
    .my-item:nth-child(@{i}) {
        animation-duration: @i*200ms;
    }
    .shown-loop(@n, (@i + 1));
}

.shown-loop(12);
@keyframes animationStyle1 {
    0% {
        opacity: 0;
        transform: rotateY(-90deg) translate3d(0, 30px, 0);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) translate3d(0, 0, 0);
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s ease;
}

.fade-enter,
.fade-leave-active {
    opacity: 0
}
</style>
